import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Spin, Button, Table, Divider } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';

const { Description } = DescriptionList;
@connect(({ invoice, loading, login: { systemList } }) => ({
  invoice,
  loading: loading.models.invoice,
  systemList,
  invRuleDetail: invoice.invRuleDetail, // 发票规则详情数据
  invRuleCostAll: invoice.invRuleCostAll, // 发票规则 成本中心发票信息
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      invRuleId: null, // 发票规则id
      sysCode: 1,
    };
  }

  componentDidMount() {
    const { location, systemList } = this.props;
    const { invRuleId } = queryString.parse(location.search);
    const { sysCode } = systemList.filter(item => item.isSelected)[0];
    this.setState({ invRuleId, sysCode });
    // 获取发票规则详情数据
    this.fetchInvRuleDetail(invRuleId);
    // 获取发票规则 成本中心发票信息
    this.fetchInvRuleCostAll(invRuleId);
  }

  // 获取发票规则详情数据
  fetchInvRuleDetail = invRuleId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'invoice/getInvRuleDetail',
      payload: {
        invRuleId,
      },
    });
  };

  // 获取发票规则 成本中心发票信息
  fetchInvRuleCostAll = invRuleId => {
    const { dispatch } = this.props;
    dispatch({
      type: 'invoice/getInvRuleCostAll',
      payload: {
        invRuleId,
      },
    });
  };

  render() {
    const { loading, invRuleDetail, invRuleCostAll } = this.props;
    const { sysCode, invRuleId } = this.state;
    // 开票项目
    const columns = [
      {
        title: '开票项目',
        dataIndex: 'invTermName',
        render: text => text || '--',
      },
      {
        title: '税率（%）',
        dataIndex: 'invRatio',
        align: 'right',
        render: text => (text === 0 ? 0 : (text && text) || '--'),
      },
    ];
    // 成本中心发票信息表格
    const costCenterColumns = [
      {
        title: '成本中心',
        dataIndex: 'costIdName',
        render: text => text || '--',
      },
      {
        title: '发票抬头',
        dataIndex: 'holderName',
        render: text => text || '--',
      },
      {
        title: '开票类型',
        dataIndex: 'invTypeName',
        render: text => text || '--',
      },
      {
        title: '操作',
        dataIndex: 'operName',
        align: 'center',
        render: (text, record) => (
          <span>
            <a
              onClick={() =>
                router.push(
                  `/fmmanage/invoice/costcenterinvdetail?costId=${
                    record.costId
                  }&invRuleId=${invRuleId}`
                )
              }
            >
              查看
            </a>
            <Divider type="vertical" />
            <a
              onClick={() =>
                router.push(
                  `/fmmanage/invoice/costcenter?costId=${
                    record.costId
                  }&invRuleId=${invRuleId}&custSuppId=${invRuleDetail.custSuppId}`
                )
              }
            >
              修改
            </a>
          </span>
        ),
      },
    ];
    return (
      <PageHeaderWrapper>
        <Spin spinning={loading}>
          <Card
            title={
              <span style={{ fontWeight: 'bolder' }}>
                {sysCode === 1 ? '客户/供应商信息' : '签约方信息'}
              </span>
            }
          >
            <DescriptionList>
              {sysCode === 1 ? (
                <Description term="客户/供应商名称">
                  {invRuleDetail.custSuppName ? invRuleDetail.custSuppName : '--'}
                </Description>
              ) : (
                <Description term="签约方">
                  {invRuleDetail.custSuppName ? invRuleDetail.custSuppName : '--'}
                </Description>
              )}
              {sysCode === 1 ? (
                <Description term="合同名称">
                  {invRuleDetail.contName ? invRuleDetail.contName : '--'}
                </Description>
              ) : null}
              <Description term="开票类型">
                {invRuleDetail.invTypeName ? invRuleDetail.invTypeName : '--'}
              </Description>
              <Description term="服务类型">
                {invRuleDetail.serTypeName ? invRuleDetail.serTypeName : '--'}
              </Description>
              <Description term="是否全额计税">
                {invRuleDetail.fullyFlagName ? invRuleDetail.fullyFlagName : '--'}
              </Description>
              <Description term="单张发票限额（元）">
                {invRuleDetail.invQuota ? invRuleDetail.invQuota : '--'}
              </Description>
              <Description term="更新人员">
                {invRuleDetail.creName ? invRuleDetail.creName : '--'}
              </Description>
              <Description term="更新时间">
                {invRuleDetail.creTime
                  ? moment(invRuleDetail.creTime).format('YYYY-MM-DD HH:mm')
                  : '--'}
              </Description>
            </DescriptionList>
          </Card>
          {invRuleDetail.invRulePanyTermMailDto &&
            invRuleDetail.invRulePanyTermMailDto.length &&
            invRuleDetail.invRulePanyTermMailDto.map(item => (
              <Card
                title={
                  <span style={{ fontWeight: 'bolder' }}>
                    {(item.invCompany && item.invCompany.invTypeName) || null}发票信息
                  </span>
                }
              >
                {// 发票抬头信息
                item.invCompany && (
                  <DescriptionList>
                    <Description term="单位名称">
                      {item.invCompany.holderName ? item.invCompany.holderName : '--'}
                    </Description>
                    <Description term="纳税人识别号">
                      {item.invCompany.taxerIdNo ? item.invCompany.taxerIdNo : '--'}
                    </Description>
                    <Description term="单位地址">
                      {item.invCompany.holderAddrs ? item.invCompany.holderAddrs : '--'}
                    </Description>
                    <Description term="电话">
                      {item.invCompany.phone ? item.invCompany.phone : '--'}
                    </Description>
                    <Description term="开户行">
                      {item.invCompany.bankOfDepoName ? item.invCompany.bankOfDepoName : '--'}
                    </Description>
                    <Description term="银行账号">
                      {item.invCompany.bankAcco ? item.invCompany.bankAcco : '--'}
                    </Description>
                  </DescriptionList>
                )}
                {// 开票项目
                item.invTerm && item.invTerm.length && (
                  <Table
                    dataSource={item.invTerm}
                    columns={columns}
                    rowKey={record => record.pdId}
                    loading={loading}
                    pagination={false}
                    bordered
                    style={{ width: '70%', margin: '12px 0' }}
                  />
                )}
                {item.invCompany && (
                  <DescriptionList style={{ margin: '20px 0' }}>
                    <Description term="备注">
                      {item.invCompany.remark ? item.invCompany.remark : '--'}
                    </Description>
                  </DescriptionList>
                )}
                {// 发票邮寄
                item.invMail && (
                  <DescriptionList>
                    <Description term="发票交付方式">
                      {item.invMail.invPayName ? item.invMail.invPayName : '--'}
                    </Description>
                    {item.invMail.invPay && item.invMail.invPay === 1 && (
                      <Description term="联系人姓名">
                        {item.invMail.contPerName ? item.invMail.contPerName : '--'}
                      </Description>
                    )}
                    {item.invMail.invPay && item.invMail.invPay === 1 && (
                      <Description term="联系人电话">
                        {item.invMail.contPerPhone ? item.invMail.contPerPhone : '--'}
                      </Description>
                    )}
                    {item.invMail.invPay && item.invMail.invPay === 1 && (
                      <Description term="邮寄地址">
                        {item.invMail.address ? item.invMail.address : '--'}
                      </Description>
                    )}
                    {/* {发票交付方式为邮件时，显示邮箱地址} */}
                    {item.invMail.invPay && item.invMail.invPay === 3 ? (
                      <Description term="邮箱地址">
                        {item.invMail.email ? item.invMail.email : '--'}
                      </Description>
                    ) : null}
                  </DescriptionList>
                )}
              </Card>
            ))}
          {sysCode === 1 ? (
            <Card title={<span style={{ fontWeight: 'bolder' }}>成本中心发票信息</span>}>
              <Table
                dataSource={invRuleCostAll}
                columns={costCenterColumns}
                rowKey={record => record.costId}
                loading={loading}
                pagination={false}
                bordered
              />
            </Card>
          ) : null}
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
